<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/view-ui-plus/dist/styles/viewuiplus.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script type="text/javascript" src="https://unpkg.com/view-ui-plus"></script>
    <style>
        body{
            margin:0;
        }
        #cesiumContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="vueContainer">
</div>
<template id="content">
    <p style="width:200px;height:100px;position:absolute; top: 0;background-color: red">
        <button @click="loadTileset()" style="padding:8px 12px;">开始剖切</button>
        <button @click="clearCutting()" style="padding:8px 12px;">结束剖切</button>
        <button @click="change(1)" style="padding:8px 12px;">切换x</button>
        <button @click="change(2)" style="padding:8px 12px;">切换y</button>
        <button @click="change(3)" style="padding:8px 12px;">切换z</button>
        <Slider v-model="data.single.move"  :min="data.single.min" :max="data.single.max" @on-input="updateData(1)"></Slider>
        <Slider v-model="data.single.levelX"  :min="-2000" :max="2000" @on-input="updateData(2)"></Slider>
        <Slider v-model="data.single.perpendicularityY"  :min="-2000" :max="2000" @on-input="updateData(3)"></Slider>
    </p>
    <div id="MapContainer"></div>
</template>
<script src="../../config/index.js"></script>
<script src="ac-min.js"></script>
<script src="VerticalSection.js"></script>
<!--<script src="test.js"></script>-->
<!--<script src="pouqie.js"></script>-->
<script>
    const {createApp,ref,onMounted,onBeforeUnmount, reactive} = Vue
    const app = createApp({
        template: `#content`,
        setup() {
            const message = ref('Hello Vue.js!');
            let data = reactive({
                single: {
                    move: 0.0,
                    levelX: 0.0,
                    perpendicularityY: 0.0,
                    type: 1,
                    min: -50,
                    max: 50,
                    status: 2
                }
            })
            /**
             * 测试方法
             */
            const test = () => {
                console.log(6565)
            }
            /**
             * 拖动滑动条
             * @param type
             */
            const updateData = (type) => {
                data.single.type = type
                VS_move =  data.single.move
                VS_levelX = data.single.levelX
                VS_perpendicularityY = data.single.perpendicularityY
                VS_type = data.single.type
                VS_type = type
            }
            /**
             * 改变 x y z的轴向
             * */
            const change = (type = 1) => {
                data.single.status = type
                VS_move =  data.single.move = 0.0
                VS_levelX = data.single.levelX = 0.0
                VS_perpendicularityY = data.single.perpendicularityY = 0.0
                VS_status = data.single.status
                VS_change(type)
            }
            // 开启剖切
            const loadTileset = () => {
                data.single.move = VS_move
                data.single.levelX = VS_levelX
                data.single.perpendicularityY = VS_perpendicularityY
                data.single.type  = VS_type
                data.single.status = VS_status
                data.single.min = VS_min
                data.single.max = VS_max
                VS_loadTileset()
            }
            /**
             * 退出剖切
             */
            const clearCutting = () =>{
                VS_clearCutting()
            }
            //挂载完成执行的程序
            onMounted(()=>{
                console.log(1111111)

            })

            //销毁组件
            onBeforeUnmount(()=>{
                // vue程序销毁时，需要清理相关资源
                console.log(22222)
            })
            return {
                message,
                data,
                test,
                loadTileset,
                updateData,
                clearCutting,
                change
            }
        }
    })
    app.use(ViewUIPlus);
    app.mount('#vueContainer')
</script>
</body>
</html>
